<template>
	<view>
		<!--全部-->
		<view class="mycontent">
			<view v-for="(item,index) in orderList" :key="item.AID">
				<!-- 开始 -->
				<view>
					<view style="display: flex;">
						<!-- 	<view style="margin-top: 104rpx;margin-left: 40rpx;">
							<view class="checkbox" :class="{checked: item.checked}"
								@click="check('single', index)">
								<u-icon name="checkmark" color="#FFF" size="24"></u-icon>
							</view>
						</view> -->
						<view style="margin-top: 104rpx;margin-left: 40rpx;">
							<u-checkbox-group>
								<u-checkbox v-model="item.checked" shape="circle" active-color="orange"
									@change="checkboxChange(item,index)"></u-checkbox>
							</u-checkbox-group>
						</view>

						<view style="margin-left: -50rpx;margin-top: 20rpx;">
							<!-- 时间 -->
							<view
								style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
								<view style="display: flex;align-items: center;justify-content: center;">
									<image style="width: 22rpx; height: 22rpx; margin-left:96rpx;margin-top: -1rpx;"
										src="../static/order/time1.png"></image>
									<text class="jh_fs_16 jh_ellipsis"
										style="color: #000;margin-left: 20rpx;width: 360rpx;">{{timeFormat(item.SetoutTime)}}</text>
								</view>

							</view>
							<!-- 起点-终点 -->
							<view style="display: flex;align-items: center;margin-top: 20rpx;">
								<view class="bluering"></view>
								<text class="jh_fs_16"
									style="color: #000;margin-left: -80rpx;">{{item.StartSiteName}}</text>
							</view>

							<view style="display: flex;align-items: center;margin-top: 20rpx;">
								<view class="redring"></view>
								<text class="jh_fs_16"
									style="color: #000;margin-left: -80rpx;">{{item.EndSiteName}}</text>
							</view>

						</view>
					</view>

					<view style="margin-top: 20rpx;">
						<text class="jh_fs_30"
							style=" line-height: 44rpx;text-align: right;margin-right: 40rpx;font-weight: 400;color: black;float: right;margin-top: -30rpx;">{{item.TotalPrice}}<text
								style="color: #787878;font-size: 28rpx;">元</text></text>
					</view>
					<!-- State:3已上车 4尚未取票 5已取票 6联网退票 7待确认 9被撤销 22已改签 34车辆调度中 13订单结束 6,7,9,13-->
					<!-- <button v-if="item.State != 6 || item.State != 7 || item.State != 9 || item.State != 13" class="jh_u-f-ac" style="width: 80px;height: 30px;border-radius: 10rpx;margin-right: 20rpx;font-size: 26rpx;" @click="carLocation(item)">车辆位置</button> -->
				</view>
				<view style="position: absolute;border-bottom: #cddad6 0.1px solid;width: 100%;margin-top: 40rpx;">
				</view>
				<!-- 结束 -->
			</view>
			<view style="background-color: #fefefe;position: fixed;bottom: 0;height: 18%;width: 100%;">
				<view style="margin-top: 10rpx;margin-left: 70rpx;"><text
						style="color: #ffbb1a;">{{tripLength}}</text>个行程，共<text
						style="color: #ffbb1a;">{{total}}</text>元</view>
				<view style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 100%;margin-top: 20rpx;">
				</view>
				<view style="display: flex;margin-top: 54rpx;">
					<view class="checkbox1" :class="isCheckNotice ? 'checkbox-activite' : ''" @click="checkedAll">
						<u-icon name="checkmark" color="#FFF" size="24"></u-icon>
					</view>
					<text style="color: gray;margin-top: 16rpx;margin-left: -50rpx;font-size: 30rpx;">订单全选</text>
					<button
						style="height: 100rpx;width: 200rpx;background-color: #ffaa00;float: right;margin-right: 60rpx;color: white;margin-top: -6rpx;"
						@click="nextStep">下一步</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize: '',
				value1: 0,
				isFixed: true,
				options: [{
					label: '汽车票',
					value: 0,
				}],
				titleList: [{
						name: '进行中'
					},
					{
						name: '已完成'
					},
					{
						name: '已取消'
					},
					{
						name: '全部'
					}
				],
				current: 0,
				Height: '',
				triggered: false,
				showBusOrder: true,
				orderList: [],
				total: 0, //总价格
				tripLength: 0, //行程
				allChecked: false, //全选状态  true|false
				checkedArr: [], //被选中的数组
				userInfo: [],
				showOrderArr: [],
				isCheckNotice: false,
			}
		},
		onLoad() {
			_self = this;
			_self.fontSize = getApp().globalData.fontSize;

			//获取系统信息
			uni.getSystemInfo({
				success: function(res) {
					console.log(res)
					// #ifdef H5
					_self.Height = res.windowHeight - '80' + 'px';
					// #endif

					// #ifndef H5
					_self.Height = res.windowHeight - '120' + 'px';
					// #endif
				}
			});
		},
		onShow() {
			// #ifdef APP
			_self.judgeUserInfo();
			// #endif
			uni.getStorage({
				key: 'userInfo',
				success: function(res) {
					console.log('用户信息', res.data);
					_self.userInfo = res.data;
					_self.GetBookLogByID();
				},
				fail: function() {
					// #ifdef MP-WEIXIN
					uni.$emit('getAuthorize', {
						data: '授权'
					});
					// #endif
				}
			})
			_self.total=0;
			_self.tripLength=0;
		},
		methods: {
			// 全选
			checkedAll() {
				// _self.orderList.map(val => {
				// 	val.checked = true;
				// })
				// _self.isCheckNotice.checked ? false : true;
				const checked = !_self.allChecked;
				const list = _self.orderList;
				list.forEach(item => {
					item.checked = checked;
					//添加被选中的订单
					_self.checkedArr.push(item);
				})
				_self.allChecked = checked;
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e, i) {
				console.log('1111', e);
				this.orderList[i].checked = this.orderList[i].checked ? false : true;
				if (this.orderList[i].checked) {
					_self.total += Number(e.TotalPrice.toFixed(2));
				} else {
					_self.total -= Number(e.TotalPrice.toFixed(2));
				}
				_self.total = Number(_self.total.toFixed(2));
				var len = 0;
				for (var j = 0; j < this.orderList.length; j++) {
					if (this.orderList[j].checked) {
						len++
					}
				}
				_self.tripLength = len;
			},
			//---------------------------------------选中状态处理---------------------------------------
			check(type, index) {
				if (type === 'single') {
					_self.orderList[index].checked = !_self.orderList[index].checked;
					//添加被选中的订单
					_self.checkedArr.push(_self.orderList[index]);
				} else {
					const checked = !_self.allChecked
					const list = _self.orderList;
					list.forEach(item => {
						item.checked = checked;
						//添加被选中的订单
						_self.checkedArr.push(item);
					})
					_self.allChecked = checked;
				}
				// 计算总价
				_self.calcTotal(type);
			},
			//---------------------------------------计算总价---------------------------------------
			calcTotal() {
				let list = _self.orderList;
				if (list.length === 0) {
					_self.empty = true;
					return;
				}
				let total = 0;
				let checked = true;
				console.log(list)
				list.forEach(item => {
					if (item.checked === true) {
						if (item.number == undefined) {
							item.number = 1;
						}
						total += item.TotalPrice * item.number;
					} else if (checked === true) {
						checked = false;
					}
				})
				_self.allChecked = checked;
				_self.total = Number(total.toFixed(2));
			},
			//-----------------------------------------------自定义刷新-----------------------------------------------
			onRefresh() {
				_self.triggered = true;
			},
			//-------------------------------------------判断用户是否登陆-------------------------------------------
			judgeUserInfo: function() {
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						// console.log('用户信息',res.data);
						_self.userInfo = res.data;
						_self.GetBookLogByID();
					},
					fail: function() {
						uni.navigateTo({
							url: '../Login/Login'
						});
					}
				})
			},
			//--------------------时间格式化------------------------------
			timeFormat: function(time) {
				var dateTime = time.replace('T', ' ');
				return dateTime.substring(0, 16);
			},
			//----------------------------------------获取订单----------------------------------------
			GetBookLogByID() {
				_self = this;
				_self.orderList = [];
				// console.log('用户信息',_self.userInfo);
				uni.showLoading({
					title: '正在加载订单...'
				})
				uni.request({
					url: _self.$h.expressInterface.expressInterface.GetBookLogByID.url,
					method: _self.$h.expressInterface.expressInterface.GetBookLogByID.method,
					data: {
						ClientID: _self.userInfo.Id,
						appSystemCode: _self.$h.expressInterface.expressInterface.appSystemCode.appSystemCode
					},
					success(res) {
						// console.log('订单信息',res);
						if (res.data.Success) {
							_self.orderList = JSON.parse(res.data.Data);
							console.log('订单信息11', _self.orderList);
							var obj = new Object();
							for (let item of res.data.data) {
								obj = {
									SetoutTime: item.SetoutTime, //订单时间
									EndSiteName: item.EndSiteName, //目的地
									StartSiteName: item.StartSiteName, //出发点
									TotalPrice: item.TotalPrice, //金额

								};
								_self.orderArr.push(obj);
							}
							// _self.showOrderArr = JSON.parse(res.data.Data);
							// console.log('订单信息11',_self.showOrderArr);
							// if(_self.current == 0){
							// 	_self.showOrderArr = _self.orderList.filter(item => {
							// 		return item.State == 4 || item.State == 7;
							// 	})
							// }else if(_self.current == 1){
							// 	_self.showOrderArr = _self.orderList.filter(item => {
							// 		return item.State == 3 || item.State == 5 || item.State == 6;
							// 	})
							// }else if(_self.current == 2){
							// 	_self.showOrderArr = _self.orderList.filter(item => {
							// 		return item.State == 9;
							// 	})
							// }
						} else {
							_self.showToast('获取失败', 'error');
						}
					},
					fail() {
						console.log('失败返回', res);
						_self.$u.toast('网络错误');
					},
					complete() {
						uni.hideLoading();
						uni.stopPullDownRefresh();
					}
				});
			},
			//----------------------------------------下一步----------------------------------------
			nextStep() {
				// for (var j = 0; j < _self.orderList.length; j++) {
				// 	if (!_self.orderList[j].checked) {
				// 		_self.$u.toast('请先选择订单');
				// 	}
				// }
				// if (!_self.orderList.checked) {
				// 	_self.$u.toast('请先选择订单');
				// }
				uni.navigateTo({
					url:'/pages_IntercityExpress/Invoicing/InvoicingDetail?total=' + _self.total,
				})
			},
		}
	}
</script>

<style lang="scss">
	.mycontent {
		flex: 1;
		width: 100%;
		background-color: #F5F9FC;
		height: 100%;
	}

	.whiteBg {
		// position: relative;
		margin: 52rpx 26rpx;
		width: 698rpx;
		padding: 10rpx 0 50rpx 0;
		background: #FFFFFF;
		border-radius: 12rpx;
		// box-shadow: 0 0 5rpx 0rpx #aaa;
	}

	.reserveDate {
		padding: 5rpx 25rpx;
		background-color: #06B4FD;
		color: #FFFFFF;
		border-radius: 24rpx;
		font-size: 24rpx;
	}

	.bluering {
		width: 12rpx;
		height: 12rpx;
		border: 4rpx solid #00aa00;
		background: #00aa00;
		border-radius: 100%;
		margin: 0rpx 96rpx;
	}

	.redring {
		width: 12rpx;
		height: 12rpx;
		border: 4rpx solid #ffaa33;
		background: #ffaa33;
		border-radius: 100%;
		margin: 0rpx 96rpx;
	}

	.checkbox-activite {
		background: linear-gradient(270deg, #ff9d13, #ff9d13);
		border-color: #ff9d13;
	}

	.checkbox {
		width: 40rpx;
		height: 40rpx;
		border: solid 0.5rpx #999;
		border-radius: 100%;
		text-align: center;
		line-height: 45rpx;
	}

	.checkbox1 {
		margin: 20rpx 70rpx;
		display: flex;
		width: 40rpx;
		height: 40rpx;
		border: solid 0.5rpx #999;
		border-radius: 100%;
		text-align: center;
		line-height: 45rpx;
	}
</style>
